import Image from 'next/image'
import React from 'react'

const Header: React.FC = () => {
  return (
    <div>
      <header className="sticky top-0 z-50 flex h-16 w-full items-center border-b border-gray-700 px-4 md:px-8 bg-gray-900 bg-opacity-90 backdrop-blur-sm">
        <div className="flex items-center gap-2 text-lg font-semibold">
          <Image
            src={'/image/icon_128x128.png'}
            alt="Network Console Logo"
            width={40}
            height={40}
          />
          <span className="text-blue-400">Network Console</span>
        </div>
        
        <nav className="hidden md:flex ml-10 space-x-8">
          <a href="#features" className="text-gray-300 hover:text-white transition duration-300">功能特性</a>
          <a href="#screenshots" className="text-gray-300 hover:text-white transition duration-300">功能预览</a>
          <a href="#installation" className="text-gray-300 hover:text-white transition duration-300">安装说明</a>
        </nav>
        
        <div className="ml-auto flex items-center">
          <a 
            href="https://microsoftedge.microsoft.com/addons/detail/lgkemdinjnjaphnbkmmcnejbefeapkfd" 
            target="_blank" 
            rel="noopener noreferrer"
            className="flex items-center bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300"
          >
            <Image
              src="/icons/edge-logo.svg"
              alt="Edge Logo"
              width={20}
              height={20}
              className="mr-2"
            />
            <span>安装插件</span>
          </a>
        </div>
      </header>
    </div>
  )
}

export default Header